<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>吃大头的芒果仔</title>
    <link rel="stylesheet" href="css/normalize.css"/>
    <link rel="stylesheet" href="css/main.css"/>
    <script src="js/jquery.min.js"></script>
    <script src="js/main.js"></script>
</head>
<body>
    <div class="main-wrapper">
        <!--页头开始-->
        <header>
            <nav class="clearfloat">
                <div class="logo"><a href="#">吃大头的芒果仔</a></div>
                <div class="menu-toggle">
                    <a href="#menu">
                        MENU
                        <span class="menu-bars"></span>
                    </a>
                    <div id="menu">
                        <ul>
                            <li><a href="#">首页</a></li>
                            <li><a href="#one">技能专长</a></li>
                            <li><a href="#two">个人经历</a></li>
                            <li><a href="#three">附加信息</a></li>
                        </ul>
                    </div>
                </div>
            </nav>
            <div id="banner">
                <div class="inner">
                    <h1>吃大头的芒果仔</h1>
                    <p class="sub-heading">大头，非理工科出身，因对前端感兴趣，自学Web前端6个月，一直在变身程序媛的路上努力着，爱游泳，爱DIY，爱烹饪。</p>
                    <button id="know-more-btn">
                        了解更多<span class="arrow"></span>
                    </button>
                </div>
            </div>
        </header>
        <!--页头结束-->
        <!--内容开始-->
        <div class="content">
            <section class="green-section" id="one">
                <div class="wrapper">
                    <div class="heading-wrapper">
                        <h2>技能专长小打小闹</h2>
                        <div class="hr"></div>
                        <p  class="sub-heading">掌握HTML/CSS/JavaScript/jQuery，熟悉Bootstrap/AngularJS/jQuery Mobile前端开发框架、PHP/MySQL后端技术、HTTP协议，了解GIT/NodeJS/Less，熟练使用Photoshop处理图片、阅读英文文档</p>
                    </div>
                    <div class="icon-group">
                        <span class="icon html">html</span>
                        <span class="icon css">css</span>
                        <span class="icon js">js</span>
                    </div>
                </div>
            </section>
            <section class="gray-section" id="two">
                <div class="article-preview clearfloat">
                    <div class="img-section">
                        <img src="images/web-study.png" alt="培训图片"/>
                    </div>
                    <div class="text-section">
                        <h2>培训经历</h2>
                        <div class="sub-heading">Web前端</div>
                        <p>（1）时间：2016.09-至今</p>
                        <p>（2）学习方式：购买达内科技Web前端培训一整套视频，同时配合慕课网/W3school/菜鸟教程等网站进行学习。</p>
                        <p>（3）达内科技Web前端培训视频课程内容：HTML5基础与高级、CSS3、JavaScript核心编程与DOM编程、UI设计与AP原型（PS切图）、服务器端开发技术（MySQL/PHP）、HTTP协议、JQuery、AJAX、Bootstrap/AngularJS/jQuery Mobile框架、GIT版本控制系统。</p>
                        <p>（4）阅读书籍：《JavaScript高级程序设计》、《CSS揭秘》</p>
                        <p>（5）常用网站：慕课网、W3school、菜鸟教程、Stack Overflow、伯乐在线、博客园、脚本之家、前端大全</p>
                    </div>
                </div>
                <div class="article-preview clearfloat">
                    <div class="text-section">
                        <h2>教育经历</h2>
                        <div class="sub-heading">统招本科</div>
                        <p>（1）2011.09-2015.06 华南理工大学 经济与贸易学院 旅游管理专业</p>
                        <p>（2）专业课程：管理学原理、酒店管理原理、旅游资源规划、旅游景区经营管理、旅游人力资源管理、餐饮运营与管理、国际旅游接待礼仪</p>
                        <p>（3）专业实习：广州四季酒店客房部Housekeeping、广州香格里拉酒店健体中心前台</p>
                    </div>
                    <div class="img-section">
                        <img src="images/edu.jpg" alt="教育图片"/>
                    </div>
                </div>
                <div class="article-preview clearfloat">
                    <div class="img-section">
                        <img src="images/job.jpg" alt=""/>
                    </div>
                    <div class="text-section">
                        <h2>毕业后的第一份工作</h2>
                        <div class="sub-heading">人力资源管理</div>
                        <p>（1）2015.06-2016.12 深圳万国城食品商业有限公司 行政人事部 人事专员</p>
                        <p>（2）工作内容：招聘、人事手续、考勤、工资核算、社保公积金、人事档案与劳动合同</p>
                        <p>（3）工作技能：人力资源管理基础知识与法律法规、沟通表达、文书写作、Office办公软件、PS处理图片与招聘海报制作</p>
                    </div>
                </div>
            </section>
            <section class="purple-section" id="three">
                <div class="wrapper">
                    <div class="heading-wrapper">
                        <h2>附加信息</h2>
                        <div class="hr"></div>
                        <div class="sub-heading">证书、奖励相关信息</div>
                    </div>
                    <div class="card-group clearfloat">
                        <div class="card">
                            <h3>证书</h3>
                            <p>（1）本科毕业证书、学士学位证书</p>
                            <p>（2）大学英语六级证书（528）</p>
                        </div>
                        <div class="card">
                            <h3>所获奖励</h3>
                            <p>（1）校级三等奖学金</p>
                            <p>（2）院际排球联赛女子组冠军（队员）</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        <!--内容结束-->
        <!--页脚-->
        <footer>
            <ul class="share-group clearfloat">
                <li><a href="https://html5up.net/spectral">网站模板</a></li>
                <li><a href="http://git.oschina.net/mangochild">码云主页</a></li>
            </ul>
            <div class="copy">
                &copy; 吃大头的芒果仔 - 2017
            </div>
        </footer>
        <!--页脚结束-->
    </div>
</body>
</html>